
@import url('../../../../index.less');
.fund_card_wrapper{
  background: #EFF2F7;
  margin-top: 4px;
  padding-bottom: 8px;
  border-radius: 4px;
  &:nth-child(1){
    margin-top: 0;
  }
}

.fund_card_box{
  // display: flex;
  position: relative;
  font-size: 0;
  .setting_btn{
    opacity: 0;
    transition: opacity .3s;
    visibility: hidden;
    cursor: pointer;
    margin: 0;
    // padding-left: 6px;
    white-space: nowrap;
    // margin-top: -4px;
    &::after{
      content: '';
      display: inline-block;
      background: url("../../../../assets/icons/icon-review.png") no-repeat;
      background-size: 7px 8px;
      width: 7px;
      height: 8px;
      margin-left: 2px;
      // vertical-align: middle;
    }
    // >span{
      font-weight: 600;
      color: #1F51A4;
      // // text-align: right;
      line-height: 16px;
      // .font-size(10);//0.833333雨薇屏幕会抖动，所以需要换成.83
      font-size: 12px;
      transform:scale(.83);

      transform-origin: left top;
      
  }
  &:hover{
    .setting_btn{
      visibility:visible;
      
    }
  }
  .setting_btn_visible{
    visibility: visible;
    opacity: 1;
    transition: opacity .3s;
  }
  .setting_btn_no_data{
    visibility: visible;
    margin-left: 4px;
    display: inline-block;
    position: absolute;
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s;
    // pointer-events: auto;
    z-index: 1;
  }
  
  >.remarks{
    top: 0;
    left: 0;
    border-radius: 4px 0 0 0;
    position: absolute;
    margin: 0;
    font-weight: 600;
    color: #35425E;
    line-height: 14px;
    z-index: 2;
    display: flex;
    align-items: center;
    width:calc(100% - 192px);
   

    >.text{
      // margin: 0 200px 0 18px;
      // max-width: calc(100% - 54px);
      margin: 0;
      background-image: linear-gradient(270deg, rgba(216,255,187,0.10) 0%, rgba(166,227,255,0.50) 100%);

      // >span{
        max-width: 100%;
        .font-size-zoom(10);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
        line-height: 16px;
        height: 16px;
        padding-left: 22px;
        padding-right: 6px;
        border-radius: 4px 0 0 0;
        margin-top: -3px;
      // }
     
    }
    &::before{
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 10px;
      height: 10px;
      background: url("../../../../assets/icons/icon_circle_message.png") no-repeat;
      background-size: 10px 10px;
      margin: 0 4px;
      position: absolute;
      top: 1.5px;
    }
    
  }
  .title_info{
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    >p{
      margin: 0;
    }
    .title_title{
      // width: 77px;
      height: 16px;
      background: #EE4923;
      border-radius: 2px 0 0 2px;
      color: #FFFFFF;
      .font-bold();
      display: flex;
      align-items: center;
      padding-right: 6px;
      span{
        .font-size(10);
        line-height: 1;
      }
      &::before{
        display: inline-block;
        content: '';
        width: 8px;
        height: 9px;
        background: url('./assets/linghting.png') no-repeat;
        background-size: 8px 9px;
        margin-right: 4px;
        margin-left: 4px;
      }
    }
    .title_count{
      height: 16px;
      background: #FFE4D8;
      border-radius: 0 4px 2px 0;
      display: flex;
      align-items: center;
      .font-bold();
      padding-left: 8px;
      span{
        .font-size(10);
        line-height: 1;
        color: #E64A00;
      }
      &::after{
        display: inline-block;
        content: '';
        background: url('./assets/arrow.png') no-repeat;
        width: 8px;
        height: 8px;
        background-size: 8px 8px;
        transform: rotate(90deg);
        margin-right: 4px;
        margin-left: 5px;
      }
      
    }
    .title_count_active{
      &::after{
        transform: rotate(0deg);
      }
    }

  }
}
.fund_card_container{
  padding: 0 0 8px 16px;
  // padding: 6px 0 0 16px;
  display: flex;
  align-items: center;
  &:hover{
    .fund_card_box{
      > .remarks{
        >.btn{
          display: block;
        }
      }
  
    } 
  }
  
  *{
    box-sizing: border-box;
  }
  p{
    margin: 0;
  }
  display: flex;
  flex-direction: row;
  
  
  position: relative;
  
  .circle_wrapper{
    // margin-top: 4px;
  }
  .percent_wrapper{
    margin-top: 6px;
    .percent{
      .font-bold();
      font-size: 14px;
      color: #35425E;
      // line-height: 28px;
      em{
        font-style: normal;
        .font-size-zoom(10);
        display: inline-block;
      }
    }
    .remarks{
      font-family: PingFangSC-Regular;
      .font-size(10);
      color:rgba(53, 66, 94, .4);
      margin-top: 2px;
      // line-height: 28px;
    }
  }
  .info_wrapper{
    // margin-top: 10px;//总共距离顶部18px-20220509-雨薇
    // margin-bottom: 8px;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    // width: 100%;
    width: calc(100% - 68px);//右边空8px给滚动条
    .info{
      display: flex;
      align-items: center;
      line-height: 1;
      width: 100%;
      // flex-direction: column;
    }
    .info_title{
      .font-bold();
      font-size: 13px;
      color: #1F51A4;
      cursor: pointer;
      max-width: 100%;//基金简称标题超出打点
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      // line-height: 28px
    }
    .range{
      
      // line-height: 28px;
      transform-origin:left center;
      display: flex;
      margin-left: 8px;
    }
    .range_gray,.range_high_light,.range_low_light{
      .font-bold();
      .font-size-zoom(10);//使用zoom不然会有间隔
    }
    .range_gray{
      color: rgba(53, 66, 94, .7);
      white-space: nowrap;
    }
    .range_high_light{
      // color: #E64A00;
      color: #E83736;
    }
    .range_low_light{
      // color:#3E9725;
      color: #038164;
    }
    .range_nomal{
      color: rgba(53, 66, 94, .7);
    }
    .manager{
      .font-bold();
      .font-size-zoom(10);
      transform-origin:left center;
      color: rgba(53, 66, 94, .7);
      line-height: 1;
      margin-top: 6px;
      margin-bottom: 6px;
      
    }
    .fund_tags{
      
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .fund_tag{
        // width: 100%;
        background:rgba(62, 101, 178, .16);
        margin-right: 4px;
        margin-top: 4px;
        line-height: 16px;
        height: 16px;
        padding: 0 8px;
        display: flex;
        align-items: center;
        max-width: 100%;
        &:nth-child(1){
          margin-left:0;
        }
        
        span{
          display: inline-block;
          .font-size-zoom(10);
          color: #1B3E84;
          .font-bold();
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          
        }
      }
    }
  }
}

.popoverStyle {
  &:hover{
    .setting_btn{
      visibility: visible;
      opacity: 1;
      transition: opacity .3s;
    }
  }
  :global {
    .ant-popover-content {
      .ant-popover-arrow {
        .ant-popover-arrow-content {
          background-color: #2B2F3C;

          &::before {
            background: unset;
          }
        }
      }

      .ant-popover-inner {
        background-color: #2B2F3C;

        .ant-popover-inner-content {
          padding: unset;
        }
      }
    }
  }
}
